<template>
 <div class="user_wrap">
   <a-button type="primary" >添加用户</a-button>
    <a-table :columns="columns" :data-source="userinfo">
    <span slot="type" slot-scope="type">
     <a-tag color='pink' v-if="type == 0">
       超级管理员
     </a-tag>
     <a-tag color='orange' v-else>普通用户</a-tag>
    </span>
    <span class="action" slot="action">
      <a-button type="primary" shape="circle" icon="edit" />
      <a-button type="danger" shape="circle" icon="delete" />
    </span>
  </a-table>
 </div>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          dataIndex: 'name',
          key: 'name',
          title: '用户名'
        },
        {
          title: '用户类型',
          dataIndex: 'type',
          key: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '创建时间',
          key: 'createTime',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      userinfo: []
    }
  },
  mounted () {
    this.getUserlist()
  },
  methods: {
    async getUserlist () {
      const res = await this.$http.post('/api/admin/getUserlist')
      res.data.data.map(item => { item.key = item.id })
      this.userinfo = res.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
.action{
  display: flex;
  align-items: center;
  .ant-btn{
    margin-right: 1em;
  }
}

</style>
